<template>
  <div class="field">
    <div class="field-input">
      <input @input="input" :type="doneType" :placeholder="placeholder">
    </div>
    <div class="field-eye" @touchstart="doneType = 'text'" @touchend="doneType = 'password'" v-if="showPassword && type === 'password'">
      <i class="icon icon-eye"></i>
    </div>

    
      <slot name="addon">
  
      </slot>
    

  </div>
</template>
<script>
export default {
  props: {
    type: {
      default: "text",
      type: String
    },
    placeholder: {
      type: String
    },
    showPassword: {
      type: Boolean
    }
  },
  data() {
    return {
      doneType: ""
    };
  },
  created() {
    this.doneType = this.type;
  },
  methods: {
    input(e) {
      this.$emit("input", e.target.value);
    }
  }
};
</script>

